<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <div style="padding-bottom: 10px;text-align: right">
        <el-button class="filter-item" type="primary" icon="el-icon-edit"
                   @click="handleAdd">添加推广参数
        </el-button>
      </div>

      <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#F2F2F2',color:'#666'}">
        <el-table-column align="left" min-width="90" label="推广级别" prop="level">
          <template slot-scope="scope">
            {{{ "0":"直接贴现返佣", "1":"一级推广", "2":"二级推广","3":"三级推广" }[ scope.row.level ]}}
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="80" label="签约银行" prop="bankCode">
          <template slot-scope="scope">
            {{{ "0000":"富民银行", "0001":"网商银行", "0002":"振兴银行" }[ scope.row.bankCode ]}}
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="120" label="金额最小值（元）" prop="minMoney"/>
        <el-table-column align="left" min-width="120" label="金额最小值（元）" prop="maxMoney"/>
        <el-table-column align="left" min-width="130" label="开始日期" prop="startDate"/>
        <el-table-column align="left" min-width="130" label="结束日期" prop="endDate"/>
        <el-table-column align="left" min-width="90" label="是否针对首贴" prop="isFirst">
          <template slot-scope="scope">
            {{{ "0":"所有", "1":"针对首贴"}[ scope.row.isFirst ]}}
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="100" label="返佣类型" prop="isFix">
          <template slot-scope="scope">
            {{{ "0":"比例", "1":"固定值"}[ scope.row.isFix ]}}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="返佣">
          <template slot-scope="scope">
            <span v-if="scope.row.isFix == '0'">{{ scope.row.perBP }} (BP)</span>
            <span v-if="scope.row.isFix == '1'">{{ scope.row.perBP }} (元)</span>
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="130" label="设置时间" prop="addTime"/>
        <el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit
                       @click="handleEdit(scope.row)">修改
            </el-button>
            <el-popover
              placement="top"
              width="200"
              trigger="manual"
              :ref="'popover-' + scope.row.id">
              <p>确定删除该数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.id].doClose()">取消
                </el-button>
                <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
              </div>
              <el-button type="danger" size="mini" slot="reference"
                         @click="$refs[`popover-` + scope.row.id].doShow()">删除
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>-->

      <!--弹出框-->
      <el-dialog :visible.sync="editDialogVisible" :title="textMap[dialogStatus]" :close-on-click-modal="false" :append-to-body="true">
        <el-form :inline="true" ref="listQuery" :model="listQuery" status-icon label-position="right" class="demo-form-inline"
                 label-width="140px" style="display: flex">
          <div style="flex: 1">
            <el-form-item label="推广级别：" prop="level">
              <el-select v-model="listQuery.level" placeholder="请选择">
                <el-option value="0" label="直接贴现返佣">直接贴现返佣</el-option>
                <el-option value="1" label="一级推广">一级推广</el-option>
                <el-option value="2" label="二级推广">二级推广</el-option>
                <el-option value="3" label="三级推广">三级推广</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="签约银行：" prop="bankCode">
              <el-select v-model="listQuery.bankCode" placeholder="请选择">
                <el-option value="0000" label="富民银行">富民银行</el-option>
                <el-option value="0001" label="网商银行">网商银行</el-option>
                <el-option value="0002" label="振兴银行">振兴银行</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="金额最小值（元）：" prop="minMoney">
              <el-input v-model="listQuery.minMoney" placeholder="金额最小值"/>
            </el-form-item>
            <el-form-item label="金额最大值（元）：" prop="maxMoney">
              <el-input v-model="listQuery.maxMoney" placeholder="金额最大值"/>
            </el-form-item>
            <el-form-item label="是否针对首贴：" prop="isFirst">
              <el-radio v-model="listQuery.isFirst" :label="0">所有</el-radio>
              <el-radio v-model="listQuery.isFirst" :label="1">针对首贴</el-radio>
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="开始时间：" prop="startDate">
              <el-date-picker
                v-model="listQuery.startDate"
                type="date"
                placeholder="开始时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间：" prop="endDate">
              <el-date-picker
                v-model="listQuery.endDate"
                type="date"
                placeholder="结束时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="返佣类型：" prop="isFix">
              <el-radio v-model="listQuery.isFix" :label="0">比例</el-radio>
              <el-radio v-model="listQuery.isFix" :label="1">固定值</el-radio>
            </el-form-item>
            <el-form-item label="返佣比例(%)：" prop="perBP" v-if="listQuery.isFix == '0'">
              <el-input v-model="listQuery.perBP" placeholder="返佣比例"/>
            </el-form-item>
            <el-form-item label="金额（元）：" prop="perBP" v-if="listQuery.isFix == '1'">
              <el-input v-model="listQuery.perBP" placeholder="金额"/>
            </el-form-item>
            <!--<el-form-item style="padding-left: 31%;">
              <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="doCreate">{{ textMap.create }}</el-button>
            </el-form-item>-->
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button v-if="dialogStatus=='create'" type="primary" @click="doCreate">确定</el-button>
          <el-button v-else type="primary" @click="doEdit">确定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  filters: {
    bankCodeFilter(val) {
      return { '0000': '富民银行', '0001': '网商银行', '0002': '振兴银行' }[val]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        /*pageNum: 1,
	   pageSize: 20,*/
        level: undefined,
        bankCode: undefined,
        minMoney: undefined,
        maxMoney: undefined,
        startDate: undefined,
        endDate: undefined,
        isFirst: undefined,
        isFix: undefined,
        perBP: undefined
      },
      listLoading: true,
      editDialogVisible: false,
      dialogStatus: undefined,
      textMap: {
        update: '编辑',
        create: '创建'
      },
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      this.listLoading = true
      doGet('extendcomm.html?op=search', {}).then(response => {
        this.list = response.rows
        /*this.total = response.data.totalcount*/
        this.listLoading = false
      }).catch(() => {
        this.list = []
        /*this.total = 0*/
        this.listLoading = false
      })
    },
    handleAdd() {
      this.listQuery = {
        level: undefined,
        bankCode: undefined,
        minMoney: undefined,
        maxMoney: undefined,
        startDate: undefined,
        endDate: undefined,
        isFirst: 0,
        isFix: 0,
        perBP: undefined
      }
      this.dialogStatus = 'create'
      this.editDialogVisible = true
      this.$nextTick(() => {
        this.$refs['listQuery'].clearValidate()
      })
    },
    doCreate() {
      /*this.listQuery = {
        level: undefined,
        bankCode: undefined,
        minMoney: undefined,
        maxMoney: undefined,
        startDate: undefined,
        endDate: undefined,
        isFirst: undefined,
        isFix: 0,
        perBP: undefined
      }*/
      this.$refs['listQuery'].validate(valid => {
        if (valid) {
          doGet('extendcomm.html?op=add', this.listQuery).then(response => {
            this.queryList()
            this.$notify.success({
              title: '成功',
              message: '推广参数添加成功'
            })
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
        }
      })
    },
    handleEdit(row) {
      this.listQuery = Object.assign({}, row)
      this.editIndex = this.list.indexOf(row)
      this.listQuery.level = String(row.level)
      this.dialogStatus = 'update'
      this.editDialogVisible = true
      this.$nextTick(() => {
        this.$refs['listQuery'].clearValidate()
      })
    },
    doEdit() {
      this.$refs['listQuery'].validate(valid => {
        if (valid) {
          doGet('extendcomm.html?op=chg', this.listQuery)
            .then(response => {
              this.queryList()
              this.editDialogVisible = false
              this.list[this.editIndex] = this.listQuery
              this.$notify.success({
                title: '成功',
                message: '修改成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.message
              })
            })
        }
      })
    },
    /*==editEnd==*/
    /*==deleteBegin==*/
    doDelete(row) {
      doGet('extendcomm.html?op=del', row.id)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
          this.total--
          this.$refs[`popover-` + row.id].doClose()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.message
          })
        })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
